/**
 * @file hoc.jsx.
 * @author liyong18@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PropTypes
} from "react";
import {findDOMNode} from 'react-dom';
import * as assign from 'object-assign';
import * as Sortable from 'sortablejs';
import {connect} from 'react-redux';
import {changeState,changeSchema,changeDrag} from '../../actions/page';
import {registerEditor} from '../factory';


/**
 * config各个参数的意思
 * canDrag: 是否可以被拖走,默认true
 * initConf: 给右侧组件列表用的, 包括schema, icon, label, 没有则不注册
 * holes: 设置有哪些占位符,
 * {
 *   // 坑的名字
 *   body:{
 *
 *     // 坑接受什么类型的type
 *     accept:"crud form xxx",
 *
 *     // 接受之后放在json的什么属性上
 *     to: "body"
 *   }
 * }
 */
export const Enhance = (config) => {

  // 如果没有设置初始化conf, 那么默认这个组件是不能拖动的
  if (!config.initConf) {
    config.canDrag = false;
  } else {
    registerEditor(initConf);
  }

  return ComposedComponent => {
    @connect(state => ({
      editorState: state.page.editor.state,
      editorDrag: state.page.editor.dragSchema
    }), {
      changeState,
      changeSchema,
      changeDrag
    })
    class Editor extends Component {

      // 最外层的container
      container = null;

      /* 
      * 有哪些坑
      * */
      holes = null;

      // 设置可以修改的属性有哪些
      editProps = null;

      // 设置可以修


      // 组件默认携带的schema
      constructor(props, context) {
        super(props, context);


      }


      setContainer(container){
        this.container = findDOMNode(container);
      }

      /*
       * 设置坑的方法
       * key: 设置坑的name
       * value: {
       *   type: 设置坑的类型，array, object
       *   ref: 设置坑的dom节点
       * }
       * */
      addHoles(config) {
        this.holes = assign({}, this.holes ,config);
      }

      // 可以在这里绑定事件，拖拽与被拖拽事件
      componentDidMount() {
        this.bindCanDrag();
      }


      bindCanDrag() {
        let canDrag = config.canDrag === undefined ? true : config.canDrag;

        if (!canDrag) {
          return;
        }

        new Sortable(this.container, {
          group: {name:config.type, pull: true, put: false},
          onRemove: function () {

          },
          onChoose: function() {
            
          }
        });
      }

      render() {
        return (
          <ComposedComponent {...this.props} ref={this.setContainer} addHoles={this.addHoles} />
        )
      }
    }
  }
};

export default Enhance;